<template>
  <div>
    <progess-chart
      style="height:400px"
      :options="{
        title: [
          {
            text: '直播访问',
            show: true,
            left: '5%',
            bottom: 80,
          },
          {
            text: '直播访问',
            show: true,
            left: '40%',
            bottom: 80,
          },
          {
            text: '直播访问',
            show: true,
            left: '75%',
            bottom: 80,
          },
        ],
        legend: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            startAngle: 180, //起始角度
            center: ['15%', '50%'],
            avoidLabelOverlap: false,
            labelLine: {
              show: false,
            },
            radius: ['20%', '30%'],
            data: [
              { value: 25, name: '2' },
              {
                value: 55,
                name: '',
                itemStyle: {
                  emphasis: {
                    color: '#e6e9f0',
                  },
                  normal: {
                    color: '#e6e9f0',
                  },
                },
              },
            ],
          },
          {
            name: '访问来源',
            type: 'pie',
            startAngle: 180, //起始角度
            avoidLabelOverlap: false,
            labelLine: {
              show: false,
            },
            radius: ['20%', '30%'],
            center: ['50%', '50%'],
            data: [
              { value: 45, name: '2' },
              {
                value: 55,
                name: '',
                itemStyle: {
                  emphasis: {
                    color: '#e6e9f0',
                  },
                  normal: {
                    color: '#e6e9f0',
                  },
                },
              },
            ],
          },
          {
            name: '访问来源3',
            type: 'pie',
            startAngle: 180, //起始角度
            avoidLabelOverlap: false,
            labelLine: {
              show: false,
            },
            radius: ['20%', '30%'],
            center: ['85%', '50%'],
            data: [
              { value: 45, name: '2' },
              {
                value: 55,
                name: '',
                itemStyle: {
                  emphasis: {
                    color: '#e6e9f0',
                  },
                  normal: {
                    color: '#e6e9f0',
                  },
                },
              },
            ],
          },
        ],
      }"
    />
    <bar-chart
      @click="handleClick"
      :options="{
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'bar',
            name: '呜呜呜呜呜呜呜呜呜',
            markLine: {
              label: {
                position: 'top',
              },
              data: [
                {
                  silent: false,
                  lineStyle: {
                    type: 'solid',
                    color: 'red',
                    width: 2,
                  },
                  label: {
                    position: 'insideEndTop',
                    formatter: params => {
                      handleFormat(params, 'params')
                    },
                  },
                  yAxis: 1600,
                },
              ],
            },
          },
          {
            data: [8290, 9329, 9010, 934, 1290, 1330, 1320],
            type: 'bar',
            name: '22223',
          },
        ],
      }"
    />

    <line-chart
      @z-c="handleClick5"
      @zr:click="handleClick2"
      ref="line"
      @highlight="handleClick"
      @downplay="handleClick3"
      :options="{
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            name: '2222',
            markLine: {},
          },
          {
            data: [8204, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            name: '22223',
          },
        ],
      }"
    />
    <v-chart
      :options="{
        tooltip: {},

        radar: {
          // shape: 'circle',
          name: {
            textStyle: {},
          },
          splitArea: { show: false },
          radius: '60%',
          indicator: [
            { name: '销售', max: 6500 },
            { name: '管理', max: 16000 },
            { name: '信息技术', max: 30000 },
            { name: '客服', max: 38000 },
            { name: '研发', max: 52000 },
            { name: '市场', max: 25000 },
          ],
        },
        series: [
          {
            name: '预算 vs 开销',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '预算分配',
              },
              {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '实际开销',
              },
            ],
          },
        ],
      }"
    />
    <word-cloud-chart
      :options="{
        series: [
          {
            data: [
              { name: '微信', value: 3328 },
              { name: '南方+', value: 1045 },
              { name: '东莞时间网', value: 834 },
              { name: 'i东莞', value: 804 },
              { name: '新浪微博', value: 532 },
              { name: '今日头条', value: 493 },
              {
                name: '腾讯新闻',
                value: 479,
              },
              { name: '东莞阳光网', value: 387 },
              { name: '东莞日报', value: 289 },
              { name: '一点资讯', value: 287 },
              { name: '东方头条网', value: 233 },
              { name: '南方都市报', value: 228 },
              { name: '新粤网', value: 207 },
              { name: '南方plus', value: 206 },
              { name: '网易新闻', value: 201 },
              { name: '东方头条', value: 180 },
              { name: '趣头条', value: 178 },
              { name: '羊城派', value: 151 },
              { name: '东莞时报', value: 143 },
              { name: '莞讯网', value: 139 },
              { name: '广州日报', value: 137 },
              { name: '东莞阳光台', value: 132 },
              { name: '搜狐新闻', value: 129 },
              {
                name: '今日头条.APP',
                value: 116,
              },
              { name: '东莞阳光平台', value: 108 },
              { name: '腾讯新闻.APP', value: 107 },
              {
                name: '南方网',
                value: 103,
              },
              { name: 'UC头条', value: 98 },
              { name: '凤凰新闻', value: 93 },
              { name: '报告诉', value: 77 },
              { name: '网易新闻.APP', value: 74 },
              { name: '中国小康网', value: 64 },
              { name: '东莞万江', value: 63 },
              { name: '信息时报', value: 59 },
              { name: '中国文明网', value: 58 },
              { name: '东莞网', value: 57 },
              { name: '搜狐新闻（自媒体）', value: 54 },
              { name: '南方日报', value: 54 },
              { name: '搜狐焦点', value: 53 },
              { name: '阳光社区', value: 52 },
              { name: '南方plus.APP', value: 47 },
              { name: '阳光望牛墩', value: 46 },
              { name: '中国报道', value: 43 },
              { name: '新浪新闻', value: 43 },
              { name: '房掌柜', value: 39 },
              { name: '广州日报网', value: 38 },
              { name: 'ZAKER', value: 38 },
              { name: '一点资讯.APP', value: 35 },
              { name: '聚焦东莞', value: 35 },
              { name: '广州新闻网', value: 35 },
              { name: '新浪', value: 31 },
              { name: '东莞服务热线12345', value: 31 },
              { name: '人民网', value: 29 },
              { name: '阳光热线问政平台', value: 26 },
              { name: '党报头条', value: 26 },
              { name: '羊城晚报地方版', value: 24 },
              { name: '网易房产', value: 23 },
              { name: '中国网', value: 22 },
              { name: '金羊网', value: 21 },
              { name: '东莞长安', value: 21 },
              { name: '百家号', value: 21 },
              { name: '澎湃新闻', value: 20 },
              { name: '读特', value: 19 },
              { name: '东方头条.APP', value: 17 },
              { name: '阳光石排', value: 16 },
              { name: '新浪乐居', value: 16 },
              { name: '微信邦', value: 16 },
              { name: '搜狐新闻.APP', value: 16 },
              { name: '人民日报', value: 16 },
              { name: '百度新闻', value: 16 },
              { name: '南方都市报.APP', value: 15 },
              { name: '荔枝网', value: 15 },
              { name: '华人头条', value: 15 },
              { name: '广东建设报', value: 15 },
              { name: '中国', value: 14 },
              { name: '阳光黄江', value: 14 },
              { name: '东方网', value: 14 },
              { name: '网易', value: 12 },
              { name: '搜狐网', value: 12 },
              { name: '和讯', value: 12 },
              { name: '文化莞城', value: 11 },
              {
                name: '聊聊网',
                value: 11,
              },
              { name: '58同镇', value: 11 },
              { name: '凤凰网', value: 10 },
              { name: '新浪网', value: 9 },
              { name: '趣头条.APP', value: 9 },
              { name: '凤岗网', value: 9 },
              { name: '新快网_新快报', value: 8 },
              { name: '上游新闻', value: 8 },
              { name: '东莞市城市综合管理局', value: 8 },
              { name: '大众网', value: 8 },
              { name: '中国新闻网', value: 7 },
              { name: '第一推', value: 7 },
              { name: '大洋网', value: 7 },
              { name: '新浪网', value: 6 },
              { name: '新浪看点', value: 6 },
              { name: '手机和讯网', value: 6 },
            ],
          },
        ],
      }"
    />
    <liquid-fill-chart :options="{ series: [{ name: '水滴', data: [0.5] }] }" />
    <funnel-chart
      :options="{
        series: [
          {
            data: [
              { value: 60, name: '访问' },
              { value: 40, name: '咨询' },
              { value: 20, name: '订单' },
              { value: 80, name: '点击' },
              { value: 100, name: '展现' },
            ],
          },
        ],
      }"
    />
    <gauge-chart
      :options="{
        series: [
          {
            data: [{ value: 70, name: '完成率' }],
          },
        ],
      }"
    />
  </div>
</template>

<script>
import {
  BarChart,
  LineChart,
  AreaChart,
  PieChart,
  MapChart,
  registerMap,
  ProgessChart,
  RadarChart,
  VChart,
  WordCloudChart,
  LiquidFillChart,
  FunnelChart,
  GaugeChart,
} from '../components'



export default {
  name: 'HelloWorld',
  components: {
    BarChart,
    AreaChart,
    LineChart,
    PieChart,
    MapChart,
    ProgessChart,
    RadarChart,
    VChart,
    WordCloudChart,
    LiquidFillChart,
    FunnelChart,
    GaugeChart,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      loading: false,
      loadingOptions: {
        color: 'green',
      },

      series: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    }
  },

  methods: {
    handleFormat(param) {
      console.log(param, '444')
    },
    handleClick(item) {
      console.log(item)
    },
    handleClick5(a, b, c) {
      console.log(a, b, c)
    },
    handleClick3(item) {
      console.log(item)
    },
    handleClick2(params) {
      let myChart = this.$refs.line.getEchartsInstance()

      let pointInPixel = [params.offsetX, params.offsetY]
      if (myChart.containPixel('grid', pointInPixel)) {
        let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
          params.offsetX,
          params.offsetY,
        ])[0]
        console.log(Math.abs(xIndex))
      }
    },
  },

  created() {
    // this.loading = true
    // setTimeout(() => {
    //   this.options = {
    //     series: [
    //       {
    //         data: [
    //           {
    //             name: '示意13',
    //             value: 200,
    //           },
    //           {
    //             name: '示意24',
    //             value: 600,
    //           },
    //         ],
    //       },
    //     ],
    //   }
    // }, 3000)
    // this.$refs.chart.getEchartsInstance().showLoading({ color: 'green' })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  height: 90px;
  border: 1px solid red;
  margin-top: 10px;
}
a {
  color: #42b983;
}
.button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
</style>
